<template>
    <div class="container">
        <!-- 搜索框 -->
        <Search ref="mysearch" @doReset="doReset" @doQuery="doRefresh" :ruleform="ruleForm">
            <template slot="top">
                <el-form-item label="rabbitmq名称:" prop="name" size="small" label-width="110px">
                    <!-- <el-select v-model="ruleForm.rabbitmqId" placeholder="请输入rabbitmq名称">
                        <el-option value="" label="全部"></el-option>
                        <el-option v-for="(item, index)  in rabbitmqOption" :label="item.name" :value="item.id"
                            :key="index"></el-option>
                    </el-select> -->
                    <el-input v-model="ruleForm.name" placeholder="请输入rabbitmq名称"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:" prop="enable" size="small" label-width="105px">
                    <el-select v-model="ruleForm.enable" placeholder="请选择">
                        <el-option value="" label="全部"></el-option>
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警邮箱:" prop="alarmEmail" size="small" label-width="105px">
                    <el-select v-model="ruleForm.alarmEmail" placeholder="请选择">
                        <el-option value="" label="全部"></el-option>
                        <el-option v-for="(item, index) in alarmEmailOption" :label="item.email" :value="item.id"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警手机号:" prop="alarmCellPhone" size="small" label-width="105px">
                    <el-select v-model="ruleForm.alarmCellPhone" placeholder="请选择">
                        <el-option value="" label="全部"></el-option>
                        <el-option v-for="(item, index) in alarmCellPhoneOption" :label="item.cellPhone" :value="item.id"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间:" prop="createDate" size="small" class="datePicker" label-width="110px">
                    <el-date-picker v-model="ruleForm.createDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
            </template>
        </Search>

        <!-- 表格 -->
        <myTable ref="mytable" :config="tableconfig">
            <!-- 新增 -->
            <div slot="mytablebody">
                <el-button type="primary" size="small" @click="handleAdd('add')" style="margin-bottom: 24px;">添加</el-button>
            </div>
            <!-- 是否启用 -->
            <template v-slot:enable="{ data }">
                <p v-if="data.enable == 1">是</p>
                <p v-else>否</p>
            </template>
            <!-- 操作 -->
            <template v-slot:operation="{ data }">
                <el-button type="text" @click="handleSee(data)" >查看</el-button>
                <el-button type="text" @click="handleAdd('edit', data)" >编辑</el-button>
                <el-button type="text" @click="handleDelete(data)">删除</el-button>
                <el-button type="text" @click="handleExecute(data)" >执行</el-button>
            </template>
        </myTable>
        <!-- 新增 -->
        <el-dialog :title="key == 'add' ? '添加任务' : '编辑任务'" :visible.sync="dialogVisibleAdd" width="30%"
            :before-close="handleClose" class="dialog">
            <el-form :model="addForm" ref="addForm" :rules="addRules" label-suffix=":" label-position="left">
                <el-form-item label="rabbitmq名称" prop="rabbitmqId" :label-width="formLabelWidth">
                    <el-select v-model="addForm.rabbitmqId" placeholder="请输入rabbitmq名称" style="width:100%;" size="small">
                        <el-option v-for="(item, index) in rabbitmqOption" :label="item.name" :value="item.id"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="调度表达式" prop="scheduleExpression" :label-width="formLabelWidth">
                    <el-input v-model="addForm.scheduleExpression" placeholder="请输入名称" size="small"></el-input>
                </el-form-item>
                <!-- <el-form-item label="任务处理器" prop="jobHandler" :label-width="formLabelWidth">
                    <el-input v-model="addForm.jobHandler" placeholder="请输入名称"></el-input>
                </el-form-item> -->
                <el-form-item label="是否启用" prop="enable" :label-width="formLabelWidth" class="enable">
                    <el-select v-model="addForm.enable" style="width:100%" size="small">
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警邮箱" prop="alarmEmail" :label-width="formLabelWidth">
                    <el-select v-model="addForm.alarmEmail" placeholder="请输入报警邮箱" style="width:100%;" size="small">
                        <el-option v-for="(item, index) in alarmEmailOption" :label="item.email" :value="item.id + ''"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警手机号" prop="alarmCellPhone" :label-width="formLabelWidth">
                    <el-select v-model="addForm.alarmCellPhone" placeholder="请输入sql server名称" style="width:100%;" size="small">
                        <el-option v-for="(item, index) in alarmCellPhoneOption" :label="item.cellPhone"
                            :value="item.id + ''" :key="index"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="getAdd('addForm', key)" size="small">确 认</el-button>
                <el-button @click="handleClose" size="small">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 查看 -->
        <drawer ref="drawer" :data="selectItem" title="任务详情" :columns="columns"></drawer>
        <!-- 删除 -->
        <!-- <el-dialog title="删除" :visible.sync="dialogVisibleDel" width="30%">
            <div class="content">您是否删除数据？</div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleDel = false">取 消</el-button>
                <el-button type="primary" @click="handleDelConfrim">确 定</el-button>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
import Search from '@/components/search.vue';
import myTable from "@/components/table.vue"
import drawer from "../data/drawer.vue"
import { rabbitmqColumns } from "../data/configData.js";
import { phoneList, emailList, rabbitmqTaskAdd, rabbitmqTaskEdit, rabbitmqTaskList, rabbitmqTaskDel, rabbitmqTaskDetail, rabbitmqTaskExecute, rabbitmqNameList } from '@/api/middleware.js';
export default {
    components: {
        Search,
        myTable,
        drawer
    },
    data() {
        return {
            ruleForm: {
                rabbitmqId: "",
                name:"",
                enable: "",
                alarmEmail: "",
                alarmCellPhone: "",
                startTime: "",
                endTime: "",
                isMain:false,
                createDate: [],
                pageNo: 1,
                pageSize: 20
            },
            rabbitmqOption: [],
            alarmEmailOption: [],
            alarmCellPhoneOption: [],
            tableconfig: {
                loading: false,
                isselection: false,
                ispagination: true,
                tabledata: [],
                isindex: true,
                thead: [
                    { sort: null, label: "rabbitmq名称", prop: "name", width: 300 },
                    { sort: null, label: "调度表达式", prop: "scheduleExpression" },
                    // { sort: null, label: "任务处理器", prop: "jobHandler" },
                    { sort: null, label: "是否启用", prop: "enable", type: "slot", width: 80 },
                    { sort: null, label: "报警邮箱", prop: "alarmEmail" },
                    { sort: null, label: "报警手机号", prop: "alarmCellPhone" },
                    { sort: null, label: "创建时间", prop: "createTime" },
                    { sort: null, label: "操作", prop: "operation", type: 'slot', width: 200 },
                ],
                currentpage: 1,
                pagesize: 0,
                total: 0,
            },
            dialogVisibleAdd: false,
            // dialogVisibleDel: false,
            formLabelWidth: "120px",
            addForm: {
                rabbitmqId: "",
                scheduleExpression: "",
                // jobHandler: "",
                enable: "",
                alarmEmail: "",
                alarmCellPhone: ""
            },
            addRules: {
                rabbitmqId: [{ required: true, message: '请选择rabbitmq名称', trigger: 'change' }],
                scheduleExpression: [{ required: true, message: '请输入调用表达式', trigger: 'blur' }],
                // jobHandler: [{ required: true, message: '请输入任务处理器', trigger: 'blur' }],
                alarmEmail: [{ required: true, message: '请输入邮箱地址', trigger: 'change' }],
                alarmCellPhone: [{ required: true, message: '请输入手机号', trigger: 'change' }],
            },
            key: "",
            selectItem: "",
            columns: rabbitmqColumns,
            delId: ""
        }
    },
    mounted() {
        this.handlePhoneList();
        this.handleEmailList();
        this.handleNameList();
        this.handleList();
    },
    methods: {
        // 报警手机号
        handlePhoneList() {
            phoneList().then(res => {
                if (res.success) {
                    this.alarmCellPhoneOption = res.result;
                }
            })
        },
        // 报警邮箱
        handleEmailList() {
            emailList().then(res => {
                if (res.success) {
                    this.alarmEmailOption = res.result;
                }
            })
        },
        // 名称列表
        handleNameList() {
            rabbitmqNameList().then(res => {
                if (res.success) {
                    this.rabbitmqOption = res.result;
                }
            })
        },
        // 重置
        doReset() {
            Object.keys(this.ruleForm).slice(0, -2).map(item => {
                this.ruleForm[item] = ""
            })
            // this.$message({
            //     message: "已重置",
            //     type: 'success'
            // });
            this.doRefresh()
        },
        // 搜索
        doRefresh() {
            this.tableconfig.currentpage = 1;
            this.ruleForm.pageNo = 1;
            this.ruleForm.isMain = false;
            this.handleList();
            this.$refs.mytable.$emit("handleGoTop");
        },
        // 页码数更新
        handleSizeChange(val) {
            console.log('tag', val);
            this.ruleForm.pageNo = 1;
            this.ruleForm.pageSize = val;
            this.ruleForm.isMain = false;
            this.handleList();
            this.$refs.mytable.$emit("handleGoTop");

        },
        // 当前页码更新
        handleCurrentChange(val) {
            this.ruleForm.pageNo = val;
            this.ruleForm.isMain = false;
            this.handleList();
            this.$refs.mytable.$emit("handleGoTop");
        },
        // 表格列表
        async handleList() {
            this.tableconfig.loading = true;
            this.tableconfig.currentpage = this.ruleForm.pageNo;
            this.tableconfig.pagesize = this.ruleForm.pageSize;
            this.ruleForm.startTime = this.ruleForm.createDate[0];
            this.ruleForm.endTime = this.ruleForm.createDate[1];
            let rabbitmqResult = await rabbitmqTaskList(this.ruleForm)
            console.log('rabbitmqResult', rabbitmqResult)
            if (rabbitmqResult.success) {
                this.tableconfig.tabledata = rabbitmqResult.result.list;
                this.tableconfig.total = rabbitmqResult.result.total;
                this.ruleForm.pageNo = rabbitmqResult.result.pageNum;
                this.ruleForm.pageSize = rabbitmqResult.result.pageSize;
            }
            this.tableconfig.loading = false;
        },
        // 新增 ,编辑
        getAdd(formName, key) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (key == 'add') {
                        rabbitmqTaskAdd(this.addForm).then(res => {
                            if (res.success) {
                                if (res.result) {
                                    this.$message.success(res.message);
                                    this.dialogVisibleAdd = false;
                                    this.$refs.addForm.resetFields();
                                    this.ruleForm.isMain = true;
                                    this.handleList()
                                } else {
                                    this.$message.error(res.message)
                                    return false;
                                }
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        rabbitmqTaskEdit(this.addForm).then(res => {
                            if (res.success) {
                                if (res.result) {
                                    this.$message.success(res.message);
                                    this.dialogVisibleAdd = false;
                                    this.ruleForm.isMain = true;
                                    this.handleList()
                                } else {
                                    this.$message.error(res.message)
                                    return false;
                                }
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    }
                }
            })
        },
        // 关闭弹窗
        handleClose() {
            this.dialogVisibleAdd = false;
            this.$refs.addForm.resetFields();
        },
        handleAdd(index, data) {
            this.key = index;
            if (this.key == 'edit') {
                rabbitmqTaskDetail(data.id).then(res => {
                    if (res.success) {
                        this.addForm = res.result
                    }
                })
            }
            this.dialogVisibleAdd = true;
        },
        handleSee(data) {
            this.selectItem = data;
            if (this.selectItem.enable == 1) {
                this.selectItem.enable = '是'
            } else {
                this.selectItem.enable = '否'
            }
            this.$refs.drawer.open(this.selectItem);
        },
        // 删除
        handleDelete(data) {
            this.delId = data.id
            // this.dialogVisibleDel = true;
            this.$confirm('确认删除该条记录?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                await this.handleDelConfrim()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.doRefresh()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 确定删除
        handleDelConfrim() {
            rabbitmqTaskDel(this.delId).then(res => {
                if (res.success) {
                    if (res.result) {
                        this.$message.success(res.message);
                        this.dialogVisibleDel = false;
                        this.ruleForm.isMain = true;
                        this.handleList()
                    } else {
                        this.$message.error(res.message);
                        return false;
                    }
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        // 执行
        handleExecute(data) {
            console.log('tag', data)
            rabbitmqTaskExecute(data.id).then(res => {
                if (res.success) {
                    this.$message.success('此rabbitmq任务执行成功')
                } else {
                    this.$message.error('此rabbitmq任务执行失败')
                }
            })
        }
    },

}
</script>

<style scoped lang="scss">
.dialog-footer {
    text-align: center;
}

.el-button--primary {
        background-color: #3C77FF;
        border-color: #3C77FF;
    }

    .el-button--text {
        color: #3C77FF;
        font-weight: 400;
    }

.content {
    font-size: 18px;
    font-weight: 600;
    text-align: center;

}
.enable{
    ::v-deep .el-form-item__label{
      width:104px !important;
      margin-left: 11px;
    }
}
.datePicker ::v-deep .el-range-separator {
    width: 30px;
}
.dialog {
    ::v-deep .el-dialog__header {
      padding: 20px 0px 10px;
      border-bottom: 1px solid #DDDDDD;
      margin: 0 20px;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      line-height: 24px;
    }
    ::v-deep .el-dialog__body {
            // padding-top: 15px;
            padding: 15px 90px;
            color: #606266;
            font-size: 14px;
            .el-form-item{
                margin-bottom: 15px;
            }
        
        }
  }
</style>